<template>
  <div>
    <!--首行模块数据-->
    <div :class="this.$store.state.app.screenWidth<992?'row-card-mobile':'row-card'">
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-postcard" :style="{'font-size': this.iconSize,'color': '#149CFC'}" ></i>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.cardCount">{{homeNumberInfo.cardCount}} 张</span>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-bottom-mobile':'row-card-item-bottom'">
          <i class="el-icon-price-tag"></i>
          <span :style="{'font-size': this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">卡总数</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-s-opportunity" :style="{'font-size':this.iconSize,'color': '#7C94F4'}"></i>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.todayActiveCount">{{homeNumberInfo.todayActiveCount}} 张</span>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div class="row-card-item-bottom">
          <i class="el-icon-rank"></i>
          <span :style="{'font-size': this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">当天激活总量</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-data-line" :style="{'font-size': this.iconSize,'color': '#63CB6C'}"></i>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.yesterdayActiveCount">{{homeNumberInfo.yesterdayActiveCount}} 张</span>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div class="row-card-item-bottom">
          <i class="el-icon-position"></i>
          <span :style="{'font-size': this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">昨日激活总量</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-star-off" :style="{'font-size': this.iconSize,'color': '#D8D3B0'}"></i>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.thisMonthActiceCount">{{homeNumberInfo.thisMonthActiceCount}} 张</span>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div class="row-card-item-bottom">
          <i class="el-icon-share"></i>
          <span :style="{'font-size': this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">当月激活总量</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-trophy" :style="{'font-size': this.iconSize,'color': '#FCDC74'}"></i>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.lastMonthActiveCount">{{homeNumberInfo.lastMonthActiveCount}} 张</span>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div class="row-card-item-bottom">
          <i class="el-icon-s-unfold"></i>
          <span :style="{'font-size': this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">上月激活总量</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-message" :style="{'font-size': this.iconSize,'color': '#23C586'}"></i>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.activeCount">{{homeNumberInfo.activeCount}} 张</span>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div class="row-card-item-bottom">
          <i class="el-icon-coin"></i>
          <span :style="{'font-size': this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">累计激活总量</span>
        </div>
      </div>
    </div>
    <!--环形图-->
    <div :class="this.$store.state.app.screenWidth<800?'row-label-mobile':'row-label'">
      <div :class="this.$store.state.app.screenWidth<800?'row-label-block-mobile':'row-label-block'">
        <div class="row-label-title"><img src="../../assets/images/logoy.png" /> <span class="row-label-title-text">移动</span> {{homeNumberInfo.CardCount1}}</div>
        <ve-ring :data="chartData" :settings="chartSettings" class="row-card-chart-item"></ve-ring>
      </div>
      <div :class="this.$store.state.app.screenWidth<800?'row-label-block-mobile':'row-label-block'">
        <div class="row-label-title"><img src="../../assets/images/logod.png" /> <span class="row-label-title-text">电信</span> {{homeNumberInfo.CardCount2}}</div>
        <ve-ring :data="chartData1" :settings="chartSettings1" class="row-card-chart-item"></ve-ring>
      </div>
      <div :class="this.$store.state.app.screenWidth<800?'row-label-block-mobile':'row-label-block'">
        <div class="row-label-title"><img src="../../assets/images/logol.png" /> <span class="row-label-title-text">联通</span> {{homeNumberInfo.CardCount3}}</div>
        <ve-ring :data="chartData2" :settings="chartSettings2" class="row-card-chart-item"></ve-ring>
      </div>
    </div>
    <!--流量使用情况 -->
    <div :class="this.$store.state.app.screenWidth<992?'row-table-mobile':'row-table'">
      <div :class="this.$store.state.app.screenWidth<992?'row-table-chart-mobile':'row-table-chart'">
        <div class="row-label-title">
          <i class="el-icon-s-promotion" style="color: #5ab1ef;font-size: 30px;margin-right: 5px"></i>
          <span style="margin: 0 10px; font-weight: bold; font-size: 20px; color: #606266"> 最近30天激活一览</span>
        </div>
        <div :style="{'overflow-x':this.$store.state.app.screenWidth<992?'scroll':'none'}">
          <ve-histogram :data="chartData3" :settings="chartSettings3" :style="{'width': this.$store.state.app.screenWidth<992?'992px':'90%','margin': '20px 5%'}" v-if="chartData3.rows.length>0"></ve-histogram>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-table-chart-mobile':'row-table-chart'">
        <div class="row-label-title">
          <i class="el-icon-s-marketing" style="color: #fa6e86;font-size: 30px;margin-right: 5px"></i>
          <span style="margin: 0 10px; font-weight: bold; font-size: 20px; color: #606266"> 最近30天利润一览 </span>
        </div>
        <div :style="{'overflow-x':this.$store.state.app.screenWidth<992?'scroll':'none'}">
          <ve-line :data="chartData4" :settings="chartSettings4" :style="{'width': this.$store.state.app.screenWidth<992?'992px':'90%','margin': '20px 5%'}" v-if="chartData4.rows.length>0"></ve-line>
        </div>
      </div>
    </div>
    <!--代理分析-->
    <div class="row-analysis">
      <div :class="this.$store.state.app.screenWidth<992?'row-analysis-title-mobile':'row-analysis-title'">
        <div :class="this.$store.state.app.screenWidth<992?'row-label-title-top-mobile':'row-label-title-left'" >
          <i class="el-icon-s-claim" style="color: #828282;font-size: 30px;margin-right: 5px"></i>
          <span style="margin: 0 10px; font-weight: bold; font-size: 20px; color: #606266;width: 150px">代理分析总计：</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-label-title-center-mobile':'row-label-title-middle'">
          <el-button type="primary" size="small" @click="changeSearchFormType('DAY')" :class="searchForm.type==='DAY'?'':'is-plain'">今日</el-button>
          <el-button type="primary" size="small" @click="changeSearchFormType('MONTH')" :class="searchForm.type==='MONTH'?'':'is-plain'">当月</el-button>
          <el-button type="primary" size="small" @click="changeSearchFormType('LASTMONTH')" :class="searchForm.type==='LASTMONTH'?'':'is-plain'">上月</el-button>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-label-title-bottom-mobile':'row-label-title-right'">
          <div class="row-analysis-title-right-item"><span>代理总数：{{agerntNumberInfo.allAgentCount}}</span></div>
          <div class="row-analysis-title-right-item"><span>总订单数：{{agerntNumberInfo.allcustomerOrdercount}}</span></div>
          <div class="row-analysis-title-right-item"><span>总利润：{{agerntNumberInfo.allProfit}}</span></div>
        </div>
      </div>
      <div :style="{'overflow-x':this.$store.state.app.screenWidth<992?'scroll':'none'}">
        <el-table
          :data="tableData"
          ref="mainDataTable"
          :loading="mainTableLoading"
          v-loading.fullscreen="tableLoading" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" class="row-main-table" tooltip-effect="dark"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
          :style="{'width':this.$store.state.app.screenWidth<992?'992px':'calc(100% - 20px)','margin':'10px'}"
        >
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="agentName" label="客户账号" align="center"></el-table-column>
          <el-table-column prop="customerOrdercount" label="订单数" align="center"></el-table-column>
          <el-table-column prop="cardCount" label="卡总数" align="center"></el-table-column>
          <el-table-column prop="average" label="平均利润" :formatter="formatterCommafyPoint2" align="center"></el-table-column>
          <el-table-column prop="profit" label="总利润" :formatter="formatterCommafyPoint2" align="center"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.current"
          :page-size="page.size"
          class="row-main-pager"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          :page-sizes="[10,20,50,100]"
          style="margin-bottom: 10px"
          background></el-pagination>
      </div>
    </div>
    <!--      :title="dialogTitle"-->
<!--    <el-dialog-->

<!--      title="88888"-->
<!--      :visible.sync="showNoticeDialogue"-->
<!--      modal-append-to-body-->
<!--      :show-close="false"-->
<!--      :close-on-click-modal="false"-->
<!--      :close-on-press-escape="false"-->
<!--      append-to-body-->
<!--      width="600px"-->
<!--      top="10vh"-->
<!--      center-->
<!--    >-->
<!--      <el-carousel ref="carousel" indicator-position="none" :autoplay=false arrow="never" @change="carouselChange" height="500px">-->
<!--        <el-carousel-item v-for="(item,index) in noticeList" :key="index">-->

<!--          <img :src="item.picUrl" alt="" class="notice_img">-->
<!--&lt;!&ndash;          <div v-html="item.contentText">{{item.contentText}}</div>&ndash;&gt;-->
<!--          <div v-html="item.contentText"></div>-->
<!--          <span>99999</span>-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="iSee()">我知道了</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import {
  getHomeAgentData, // 查询代理首页数据
  getHomeAgentTableData, //查询表格数据
  getHomeAgentAccountData,//查询表格数据
} from "@/api/getData";

export default {
  name: "agentView",
  data() {
    this.chartSettings = {
      dimension: "卡状态",
      metrics: "总量",
      radius: [70, 100]
    };
    (this.chartSettings1 = {
      dimension: "卡状态",
      metrics: "总量",
      radius: [70, 100]
    }),
      (this.chartSettings2 = {
        dimension: "卡状态",
        metrics: "总量",
        radius: [70, 100]
      }),
      (this.chartSettings3 = {
        metrics: ["激活"],
        dimension: ["日期"],
        itemStyle: {color: "#5ab1ef"}
      }),
      (this.chartSettings4 = {
        metrics: ["利润"],
        dimension: ["日期"],
        itemStyle: {color: "#fa6e86"}
      });
    return {
      dialogTitle: '',
      activeCarousel: 0,
      showNoticeDialogue: false,
      noticeItemVisible: [],
      noticeList: [],
      searchForm: {
        type: "DAY"
      },
      mainTableLoading: false,
      agerntNumberInfo: {},
      pageSize: 10,
      currentPage: 1,
      maxPage: 1,
      page: {
        current: 1,
        size: 10,
        total: 0,
        ascs: [],
        descs: []
      },
      tablePage: {
        pageSize: 15,
        pageSizes: [5, 15, 20, 50, 100, 200, 500, 1000]
      },
      homeNumberInfo: {
        cardNumber: "--",           //cardCount----卡总数
        todayActiveCount: "--",     //当天激活总量
        yesterdayActiveCount: "--", //昨日激活总量
        thisMonthActiveCount: "--", //当月激活总量
        lastMonthActiveCount: "--", //上月激活总量
        cardsActiveNumber: "--"     //累计激活总量
      },
      chartData: {
        columns: ["卡状态", "总量"],
        rows: [
          {卡状态: "已激活", 总量: 0},
          {卡状态: "去激活", 总量: 0},
          {卡状态: "已停机", 总量: 0}
        ]
      },
      chartData1: {
        columns: ["卡状态", "总量"],
        rows: [
          {卡状态: "已激活", 总量: 0},
          {卡状态: "去激活", 总量: 0},
          {卡状态: "已停机", 总量: 0}
        ]
      },
      chartData2: {
        columns: ["卡状态", "总量"],
        rows: [
          {卡状态: "已激活", 总量: 0},
          {卡状态: "去激活", 总量: 0},
          {卡状态: "已停机", 总量: 0}
        ]
      },
      chartData3: {
        columns: ["日期", "激活"],
        rows: []
      },
      chartData4: {
        columns: ["日期", "利润"],
        rows: []
      },
      tableData: [],
      currentRow: null,
      fontSize: 0,
      iconSize:0,
    };
  },

  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    toggleClick: {
      type: Function,
      default: null
    }
  },
  mounted() {
    this.changeScreenWidth()
    let _this = this;
    window.addEventListener('resize', function() {
      _this.changeScreenWidth()
    })
    this.initData();
    this.showNotice();
  },
  methods: {
    changeScreenWidth(){
      if(this.$store.state.app.screenWidth<414){
        this.iconSize = 15 * (this.$store.state.app.screenWidth / 320);
        this.fontSize = 10 * (this.$store.state.app.screenWidth / 320);
      }
      else if(this.$store.state.app.screenWidth>=414&&this.$store.state.app.screenWidth<992){
        this.iconSize = 10 * (this.$store.state.app.screenWidth / 400);
        this.fontSize = 7 * (this.$store.state.app.screenWidth / 400);
      }
      else if(this.$store.state.app.screenWidth>=992&&this.$store.state.app.screenWidth<1920){
        this.iconSize = 10 * (this.$store.state.app.screenWidth / 500);
        this.fontSize = 8 * (this.$store.state.app.screenWidth / 600);
      }
      else if(this.$store.state.app.screenWidth>=1920){
        this.iconSize = 15 * (this.$store.state.app.screenWidth / 750);
        this.fontSize = 10 * (this.$store.state.app.screenWidth / 750);
      }
      this.iconSize += 'px';
      this.fontSize += 'px';
    },
    initData() {
      this.houmeNumber();
      this.getTableData();
      this.getHomeAgentAccountData();
    },
    // 查询首页数据
    async houmeNumber(theKey) {
      const returnData = await getHomeAgentData({},
        {
          obj: this,
          key: "tableLoading;" + theKey
        }
      );
      if(returnData._result){
        this.homeNumberInfo = returnData.data;
        let chartItem = JSON.parse(returnData.data.operatorLine);
        if(chartItem!=null){
          //移动
          let chartData = chartItem.CARDMOBILE;
          this.homeNumberInfo.CardCount1 = chartData.cardCount;
          this.chartData.rows[0]['总量'] = chartData.ACTIVATE;
          this.chartData.rows[1]['总量'] = chartData.DEACTIVATED;
          this.chartData.rows[2]['总量'] = chartData.PAUSE;
          //电信
          let chartData1 = chartItem.CARDTELECOM;
          this.homeNumberInfo.CardCount2 = chartData1.cardCount;
          this.chartData1.rows[0]['总量'] = chartData1.ACTIVATE;
          this.chartData1.rows[1]['总量'] = chartData1.DEACTIVATED;
          this.chartData1.rows[2]['总量'] = chartData1.PAUSE;
          //联通
          let chartData2 = chartItem.CARDUNICOM;
          this.homeNumberInfo.CardCount3 = chartData2.cardCount;
          this.chartData2.rows[0]['总量'] = chartData2.ACTIVATE;
          this.chartData2.rows[1]['总量'] = chartData2.DEACTIVATED;
          this.chartData2.rows[2]['总量'] = chartData2.PAUSE;

          //已激活图表
          let list = JSON.parse(returnData.data.activeLine);
          list.dateList.map((item, index) => {
            let data = {};
            // data["日期"] = item.substring(5,7)+'/'+item.substring(8,10);
            data["日期"] = item.substring(5,10);
            data["激活"] = list.lineDateVOList[0].data[index];
            this.chartData3.rows.push(data);
          });
          //利润图表
          let list_profit = JSON.parse(returnData.data.profitLine);
          console.log(list_profit)
          list_profit.dateList.map((item, index) => {
            let data = {};
            data["日期"] = item.substring(5,10);
            data["利润"] = list_profit.lineDateVOList[0].data[index];
            this.chartData4.rows.push(data);
          });
        }
      }
    },

    //查询表格数据
    async getTableData(theKey){
      let _this = this;
      const returnData = await getHomeAgentTableData({
          dateType: this.searchForm.type,
          page: {
            current: this.page.current,
            size: this.page.size
          }
        },
        {
          obj: this,
          key: "tableLoading;" + theKey
        }
      );
      if(returnData._result){
        this.tableData = [];
        for(let item of returnData.data.records){
          let obj = {};
          obj.agentName = item.loginName;
          obj.customerOrdercount = '--';
          obj.cardCount = item.cardCount;
          obj.average = '--';
          obj.profit = '--';
          if(_this.searchForm.type === 'DAY'){
            obj.customerOrdercount = item.sumOrderNumberDay;
            obj.average = item.averageProfitDay;
            obj.profit = item.sumProfitDay;
          }
          else if(_this.searchForm.type === 'MONTH'){
            obj.customerOrdercount = item.sumOrderNumberMonth;
            obj.average = item.averageProfitMonth;
            obj.profit = item.sumProfitMonth;
          }
          else if(_this.searchForm.type === 'LASTMONTH'){
            obj.customerOrdercount = item.sumOrderNumberLastMonth;
            obj.average = item.averageProfitLastMonth;
            obj.profit = item.sumProfitLastMonth;
          }
          _this.tableData.push(obj);
        }
        this.page.total = returnData.data.total;
      }
    },
    // 新版分页
    handleCurrentChange(val) {
      this.page.current = val;
      this.getTableData();
    },
    handleSizeChange(val){
      this.page.current = 1;
      this.page.size = val;
      this.getTableData();
    },
    changeSearchFormType(dateType) {
      this.searchForm.type = dateType;
      this.getTableData();
      this.getHomeAgentAccountData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    //查询数据统计
    async getHomeAgentAccountData(theKey){
      const returnData = await getHomeAgentAccountData({
          dateType: this.searchForm.type,
        },
        {
          obj: this,
          key: "tableLoading;" + theKey
        }
      );
      if(returnData._result){
        this.agerntNumberInfo.allAgentCount = returnData.data.agentCount;
        this.agerntNumberInfo.allcustomerOrdercount = 0;
        this.agerntNumberInfo.allProfit = 0;
        if(this.searchForm.type==='DAY'){
          this.agerntNumberInfo.allcustomerOrdercount = returnData.data.orderNumberCountDay;
          this.agerntNumberInfo.allProfit = returnData.data.profitSumDay;
        }
        else if(this.searchForm.type==='MONTH'){
          this.agerntNumberInfo.allcustomerOrdercount = returnData.data.orderNumberCountMonth;
          this.agerntNumberInfo.allProfit = returnData.data.profitSumMonth;
        }
        else if(this.searchForm.type==='LASTMONTH'){
          this.agerntNumberInfo.allcustomerOrdercount = returnData.data.orderNumberCountLastMonth;
          this.agerntNumberInfo.allProfit = returnData.data.profitSumLastMonth;
        }
        this.$forceUpdate();

      }
    },
    iSee() {

      let length = this.noticeList.length - 1;
      if (this.activeCarousel === length) {
        this.showNoticeDialogue = false;
        this.noticeList = [];
        // sessionStorage.setItem("noticeList", JSON.stringify(this.noticeList));
        // sessionStorage.setItem("noticeList", '[]');

      } else {
        this.$refs.carousel.next();
      }
    },
    carouselChange(index) {
      this.activeCarousel = index
      if(this.noticeList[index]){
        this.dialogTitle = this.noticeList[index].title
      }

    },
    showNotice() {

      this.noticeList = JSON.parse(localStorage.getItem("noticeList"));
      if (this.noticeList&&this.noticeList!='null'&&this.noticeList.length > 0) {
        this.noticeList.map((item, index) => {
          this.dialogTitle = this.noticeList[0].title
        });
      }
    },

    formatterCommafyPoint2({cellValue}) {
      if (cellValue === "--") {
        return "￥--";
      } else {
        return "￥" + XEUtils.commafy(cellValue, {digits: 2});
      }
    },
  }
};
</script>

<style scoped>
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  /*首行 模块数据 样式*/
  .row-card{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .row-card-mobile{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    overflow-x: scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .row-card-item{
    width: 16%;
    height: 6vw;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    font-size: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-card-item-mobile{
    width: auto;
    height: 70px;
    position: relative;
    margin-right: 10px;
    display: inline-flex;
    flex-direction: column;
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    font-size: 14px;
    padding: 0 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-card-item-top{
    width: 90%;
    height: 65%;
    position: relative;
    border-bottom: 1px solid #DCDFE6;
    margin: 0 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .row-card-item-top-mobile{
    width: 110px;
    height: 65%;
    position: relative;
    border-bottom: 1px solid #DCDFE6;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .row-card-item-bottom{
    width: 90%;
    height: 34%;
    position: relative;
    margin: 0 5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #a9a9a9;
  }
  .row-card-item-bottom-mobile{
    width: auto;
    height: 34%;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    color: #a9a9a9;
  }
  /*三大运营商*/
  .row-label{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
  }
  .row-label-block{
    width: 32.7%;
    height: auto;
    position: relative;
    line-height: 50px;
    font-size: 18px;
    color: dimgray;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-label-block-mobile{
    width: 100%;
    height: auto;
    position: relative;
    line-height: 50px;
    font-size: 18px;
    color: dimgray;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;
  }
  .row-label-title{
    width: 100%;
    height: 66px;
    position: relative;
    font-size: 18px;
    color: dimgray;
    border-bottom: 1px solid #DCDFE6;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .row-label-title img{
    height: 30px;
    width: auto;
    margin-right: 10px;
  }
  .row-label-title-text{
    font-size: 24px;
    font-weight: bold;
    color: #696969;
    text-indent: 2px;
  }
  .row-card-chart-item{
    width: 30%;
    height: auto;
    position: relative;
    margin-top: 50px;
  }
  .row-label-title-top-mobile{
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .row-label-title-center-mobile{
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;
  }
  .row-label-title-bottom-mobile{
    width: 270px;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    margin-left: 10px;
  }
  .row-label-title-left{
    width: auto;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .row-label-title-middle{
    width: auto;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .row-label-title-right{
    margin-left: 20px;
    width: 540px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  /*流量使用情况 及表格*/
  .row-table{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .row-table-mobile{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
  }
  .row-table-chart{
    width: 49%;
    height: auto;
    position: relative;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-table-chart-mobile{
    width: 100%;
    height: auto;
    position: relative;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    overflow-x: scroll;
  }
  .row-analysis{
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 20px;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-analysis-title{
    width: 100%;
    height: 65px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    border-bottom: 1px solid #DCDFE6;
  }
  .row-analysis-title-mobile{
    width: 100%;
    height: 65px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    border-bottom: 1px solid #DCDFE6;
    overflow-x: scroll;
  }
  /*.row-analysis-title-left{
    width: 40%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
  }
  .row-analysis-title-right{
    width: 500px;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 65px;
  }*/
  .row-analysis-title-right-item{
    width: 150px;
    height: 100%;
    position: relative;
  }
  @media screen and (min-width: 1920px) {
    .row-card-item-bottom{
      font-size: 16px;
    }
  }
</style>
